<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>遍历</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <!-- 官方推荐使用 v-for 的时候，给对应一个元素加一个 :key 属性 -->
                <!-- :key 的作用是更高效的更新 DOM 渲染, 防止不必要的重新渲染 -->
                <li v-for="name in names" :key="name">{{name}}   😳😳😳😳😳</li>
            </ul>

            <!-- 遍历对象 -->
            <ul>
                <!-- 在遍历对象时, 一个元素接收的时 value -->
                <!-- 一个二元组接收, 第一个参数为 value, 第二个参数 为 key -->
                <!-- 一个三元组接收, 第一个参数为 value, 第二个参数 为 key 第三个参数是 index-->
                <li v-for="(value, key) in info">{{key}} = {{value}}</li>
            </ul>
        </div>
    </body>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {
                /**
                 * 数组方法中可以触发数组更新（响应式）
                 * push 追加一个元素
                 * pop  删除最后一个元素
                 * shift 删除第一个元素
                 * unshift 在数组最前面添加元素
                 * splice 删除元素/插入元素/替换元素 {@link ./es6-exmaple.html}
                 * sort 数组排序
                 * reverse 数组反转
                 **/
                names: ['why', 'kobe', 'james', 'curry'],
                info: {
                    name: '杨光',
                    age: 10,
                    height: 170
                }
            }
        });
    </script>
</html>
